<template>
    <!-- 筛选搜索 -->
    <div class="search-box">
        <div class="search">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div class="right">
                <el-button @click="Reset">重置</el-button>
                <el-button type="primary" @click="ListFn">查询搜索</el-button>
            </div>
        </div>
        <div class="search">
            <div>
                <span>输入搜索:</span>
                <el-input placeholder="输入搜索" v-model="form.keyword"></el-input>
            </div>
            <div>
                <span>商品货号:</span>
                <el-input placeholder="商品货号" v-model="form.keyword"></el-input>
            </div>
            <div>
                <span>商品分类:</span>
                <el-input placeholder="请输入账号、姓名" v-model="form.keyword"></el-input>
            </div>
            <div>
                <span>商品品牌:</span>
                <el-input placeholder="请输入账号、姓名" v-model="form.keyword"></el-input>
            </div>
            <div>
                <span>上架状态:</span>
                <el-input placeholder="请输入账号、姓名" v-model="form.keyword"></el-input>
            </div>
            <div>
                <span>审核状态:</span>
                <el-input placeholder="请输入账号、姓名" v-model="form.keyword"></el-input>
            </div>

        </div>

    </div>
    <!-- 数据列表 -->
    <div class="search-box">
        <div class="search2">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button type="primary" v-permission="'addUser'">添加</el-button>
            </div>
        </div>
    </div>
    <div>
        <el-table :data="list" border table-layout="auto" cell-class-name="align-c">
            <el-table-column prop="id" label="编号" width="60" />
            <el-table-column prop="name" label="账号" width="100" />
            <el-table-column prop="nickName" label="姓名" width="100" />

            <el-table-column label="操作" width="240">
                <template #default="{ row }">
                    <el-button type="primary" v-permission="'allocRole'">删除</el-button>
                    <el-button type="primary" v-permission="'editUser'">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div>
        <ElConfigProvider :locale="locale">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="pageChangeHandle" @current-change="pageSizeChangeHandle" />
        </ElConfigProvider>
    </div>
</template>
<script setup lang='ts'>import useTable from '@/hooks/useTable';
import { ref } from 'vue';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { productListApi } from './api';


// 分页器数据
const background = ref(false)
const locale = zhCn

// 传入数据
const form = ref({
    // 搜索框数据
    keyword: ""
})
let { list, total, pageNum, pageSize, pageChangeHandle, pageSizeChangeHandle, ListFn } = useTable(productListApi, form.value)


// 重置
const Reset = () => {
    form.value.keyword = ""
    pageNum.value = 1
    pageSize.value = 10
    ListFn();
}

</script>
<style lang="less" scoped>
.search-box {
    box-shadow: 0 0 10px 0px #ccc;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;

    .search {
        padding: 20px 0px;
        display: flex;


        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            display: flex;
            flex-wrap: wrap;
            // width: 300px;
            margin-left: 40px;

            div {
                width: 250px;
                display: flex;

                span {
                    font-size: 14px;
                    width: 125px;
                    margin-right: 12px;
                }
            }

        }
    }

    .search2 {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .left {

            span {
                line-height: 20px;
                font-size: 14px;
                align-items: center;
            }
        }


    }
}

:deep(.align-c),
:deep(.is-leaf) {
    .cell {
        text-align: center !important;
    }


}
</style>